<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="The JointJS Paper attributes demo serves as a template to help bring your idea to life in no time.">

    <title>Paper attributes | JointJS</title>

    <link rel="stylesheet" type="text/css" href="css/paper.css" />
  </head>
  <body>

    <div id="paper"></div>

    <div class="left">

      <div class="panel panel-primary">
        <div class="panel-heading"><a href="http://resources.jointjs.com/docs/jointjs/#dia.Paper.prototype.options" target="_top">Attributes</a></div>
        <div class="panel-body">
          <div class="row">
            <div class="form-group">
              <label for="ox" title="Position of zero x-coordinate of the paper in pixels">Origin x</label>
              <input id="ox" name="ox" type="range" value="0" min="-200" max="200" autocomplete="off"/>
              <output for="ox">0</output>
            </div>
            <div class="form-group">
              <label for="oy" title="Position of zero y-coordinate of the paper in pixels">Origin y</label>
              <input id="oy" type="range" value="0" min="-200" max="200" autocomplete="off"/>
              <output for="oy">0</output>
            </div>
            <div class="form-group">
              <label for="sx" title="Scale factor for x axis">Scale x</label>
              <input id="sx" type="range" value="1.00" step="0.1" min="0.1" max="3" autocomplete="off"/>
              <output for="sx">1.00</output>
            </div>
            <div class="form-group">
              <label for="sy" title="Scale factor for y axis">Scale y</label>
              <input id="sy" type="range" value="1.00" step="0.1" min="0.1" max="3" autocomplete="off"/>
              <output for="sy">1.00</output>
            </div>
            <div class="form-group">
              <label for="width" title="Width of the paper in pixels">Width</label>
              <input id="width" class="form-control" type="range" value="600" min="100" max="1200" autocomplete="off"/>
              <output for="width">600</output>
            </div>
            <div class="form-group">
              <label for="height" title="Height of the paper in pixels">Height</label>
              <input id="height" class="form-control" type="range" value="400" min="100" max="1200" autocomplete="off"/>
              <output for="height">400</output>
            </div>
            <div class="form-group">
              <label for="grid" title="Size of the grid in pixels">Grid size</label>
              <input id="grid" class="range" type="range" value="10" min="1" max="50" autocomplete="off"/>
              <output for="grid">10</output>
            </div>
          </div>
        </div>
      </div>

      <div class="panel panel-primary">
        <div class="panel-heading"><a href="http://resources.jointjs.com/docs/jointjs/#dia.Paper.prototype.drawGrid"
                                      target="_top">Grid</a></div>
        <div class="panel-body">
          <div class="form-group">
            <label for="grid-type">Grid Type</label>

            <select id="grid-type" autocomplete="off">
              <option value="dot">Dot</option>
              <option value="fixedDot">Fixed Dot</option>
              <option value="mesh">Mesh</option>
              <option value="doubleMesh">Double Mesh</option>
            </select>
            <div class="grid-types-opt">
            </div>

          </div>
        </div>

      </div>
      <div class="panel panel-primary">
        <div class="panel-heading"><a href="http://resources.jointjs.com/docs/jointjs/#dia.Paper.prototype.getContentBBox" target="_top">Content bounding box</a></div>
        <div class="panel-body">
          <label for="bbox-x">x</label>
          <span class="output" id="bbox-x">0.0</span>
          <label for="bbox-y">y</label>
          <span class="output" id="bbox-y">0.0</span>
          <label for="bbox-width">width</label>
          <span class="output" id="bbox-width">0.0</span>
          <label for="bbox-height">height</label>
          <span class="output" id="bbox-height">0.0</span>
        </div>
      </div>
    </div>

    <div class="right">

      <div id="fit-to-content" class="panel panel-primary">
        <div class="panel-heading"><a href="http://resources.jointjs.com/docs/jointjs/#dia.Paper.prototype.fitToContent" target="_top">Fit to content</a></div>
        <div class="panel-body">
          <div class="form-group">
            <label for="ftc-padding" title="Add padding to the resulting width & height of the paper">Padding</label>
            <input id="ftc-padding" class="range" type="range" value="0" min="0" max="100" autocomplete="off"/>
            <output for="ftc-padding">0</output>
          </div>
          <div class="form-group">
            <label for="ftc-grid-width" title="Snap the resulting width to the grid">Grid width</label>
            <input id="ftc-grid-width"  class="range" type="range" value="1" min="0" max="100" autocomplete="off"/>
            <output for="ftc-grid-width">1</output>
          </div>
          <div class="form-group">
            <label for="ftc-grid-height" title="Snap the resulting height to the grid">Grid height</label>
            <input id="ftc-grid-height" class="range" type="range" value="1" min="0" max="100" autocomplete="off"/>
            <output for="ftc-grid-height">1</output>
          </div>
          <div class="checkbox">
            <label for="ftc-new-origin" title="<ul><li><b>don't allow</b> - ignore top-left corner of a paper content and set the origin to {x:0,y:0}</li><li><b>negative</b> - fit top-left corner of a paper content if it has negative coordinates</li><li><b>positive</b> - fit top-left corner of a paper content if it has positive coordinates</li><li><b>any</b> - fit top-left and bottom-right corners of a paper content</li></ul>">Allow new origin</label>
            <select id="ftc-new-origin" type="checkbox" autocomplete="off">
              <option value="">Don't allow</option>
              <option value="negative">Negative</option>
              <option value="positive">Positive</option>
              <option value="any" selected>Any</option>
            </select>
          </div>
        </div>
      </div>

      <div id="scale-to-fit" class="panel panel-primary">
        <div class="panel-heading"><a href="http://resources.jointjs.com/docs/jointjs/#dia.Paper.prototype.transformToFitContent" target="_top">Transform to fit content.</a></div>
        <div class="panel-body">
          <div class="form-group">
            <label for="stf-padding" title="Add an additional padding in the resulting, scaled, paper content">Padding</label>
            <input id="stf-padding" class="range" type="range" value="0" min="0" max="100" autocomplete="off"/>
            <output for="stf-padding">0.0</output>
          </div>
          <div class="form-group">
            <label for="stf-min-scale" title="Set the minimum allowed scale factor">Min scale</label>
            <input id="stf-min-scale" class="range" type="range" value="0.1" step="0.1" min="0.1" max="1.00" autocomplete="off"/>
            <output for="stf-min-scale">0.1</output>
          </div>
          <div class="form-group">
            <label for="stf-max-scale" title="Set the maximum allowed scale factor">Max scale</label>
            <input id="stf-max-scale" class="range" type="range" value="1.0" step="0.1" min="1" max="3" autocomplete="off"/>
            <output for="stf-max-scale">1.0</output>
          </div>
          <div class="form-group">
            <label for="stf-scale-grid" title="Set the rounding factor for the resulting scale">Scale grid</label>
            <input id="stf-scale-grid" class="range" type="range" value="0.0" step="0.1" min="0" max="0.3" autocomplete="off"/>
            <output for="stf-scale-grid">0.0</output>
          </div>
          <div class="checkbox">
            <label for="stf-ratio" title="Enable/disable preservation of aspect ratio of the scaled paper content">
              <input id="stf-ratio" type="checkbox" checked autocomplete="off"/>Preserve aspect ratio
            </label>
          </div>
          <div class="form-group">
            <label for="stf-vertical-align">Vertical align</label>
            <select id="stf-vertical-align">
              <option value="top">top</option>
              <option value="middle" selected>middle</option>
              <option value="bottom">bottom</option>
            </select>
          </div>
          <div class="form-group">
            <label for="stf-horizontal-align">Horizontal align</label>
            <select id="stf-horizontal-align">
              <option value="left">left</option>
              <option value="middle" selected>middle</option>
              <option value="right">right</option>
            </select>
          </div>
          <button id="stf-scale-to-fit">Transform to fit</button>
        </div>
      </div>

      <div class="panel panel-primary">
        <div class="panel-heading"><a href="http://resources.jointjs.com/docs/jointjs/#dia.Paper.prototype.options.background" target="_top">Background</a></div>
        <div class="panel-body">
          <div class="form-group">
            <label for="bg-color">Color</label>
            <input id="bg-color" class="color" type="color" value="#ffffff"/>
          </div>
          <div class="checkbox">
            <label for="bg-toggle">
              <input id="bg-toggle" type="checkbox"/>Show background image
            </label>
          </div>
          <div class="form-group">
            <label for="bg-repeat">Repeat</label>
            <select id="bg-repeat">
              <option value="no-repeat" selected>no repeat</option>
              <option value="repeat">repeat</option>
              <option value="repeat-x">repeat x</option>
              <option value="repeat-y">repeat y</option>
              <option value="round">round</option>
              <option value="space">space</option>
              <option value="flip-x">flip x</option>
              <option value="flip-y">flip y</option>
              <option value="flip-xy">flip xy</option>
              <option value="watermark">watermark</option>
            </select>
          </div>
          <div class="form-group">
            <label for="bg-position">Position</label>
            <select id="bg-position">
              <option value="'center'" selected>center</option>
              <option value="'left'">left</option>
              <option value="'right'">right</option>
              <option value="'top'">top</option>
              <option value="'bottom'">bottom</option>
              <option value="'50px 50px'">50px 50px</option>
              <option value="{ 'x': 50, 'y': 50 }">{ x: 50, y: 50 }</option>
            </select>
          </div>
          <div class="form-group">
            <label for="bg-size">Size</label>
            <select id="bg-size">
              <option value="'auto auto'" selected>auto auto</option>
              <option value="'cover'">cover</option>
              <option value="'contain'">contain</option>
              <option value="'30px 30px'">30px 30px</option>
              <option value="'100% 100%'">100% 100%</option>
              <option value="{ 'width': 50, 'height': 50 }">{ width: 50, height: 50 }</option>
            </select>
          </div>
          <div class="form-group">
            <label for="bg-opacitye">Opacity</label>
            <input id="bg-opacity" class="range" type="range" value="1" step="0.1" min="0" max="1"/>
            <output for="bg-opacity">1</output>
          </div>
        </div>
      </div>

    </div>

    <!-- This demo uses jQuery for DOM manipulation -->
    <script src="../../node_modules/jquery/dist/jquery.js"></script>
    <script src="../../build/joint.js"></script>
    <script src="src/paper.js"></script>

  </body>
</html>
